<template>
  <el-card :bordered="false" class="storeOrderDetails">
    <el-page-header @back="$router.go(-1)" style="margin-bottom:10px"></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <el-card
        class="box-card"
        shadow="never"
        style="margin: 20px 0;background-color:rgba(215, 215, 215, 0.5);"
      >
        <div slot="header" class="clearfix">
          <h3 class="header_title" v-if="this.$route.query.status == '00'">待配送</h3>
          <h3 class="header_title" v-if="this.$route.query.status == '01'">配送中</h3>
          <h3 class="header_title" v-if="this.$route.query.status == '02'">已完成</h3>
          <h3 class="header_title" v-if="this.$route.query.status == '03'">已取消</h3>
        </div>
        <el-row :gutter="10">
          <el-col :xs="8" :md="8">
            <el-form-item label="门店采购单号：">{{shopPurchaseShopInfoDto.purchaseInfoId}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="创单人：">{{shopPurchaseShopInfoDto.operatorId}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="制单时间：">{{shopPurchaseShopInfoDto.createTime}}</el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- 门店采购信息 -->
      <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
        <div slot="header" class="clearfix">
          <h3>门店采购信息</h3>
        </div>
        <el-row :gutter="10">
          <el-col :xs="8" :md="8">
            <el-form-item label="门店名称：">{{shopPurchaseShopInfoDto.createTime}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="联系人：">{{shopPurchaseShopInfoDto.personName}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="联系手机号：">{{shopPurchaseShopInfoDto.personNum}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="门店地址：">{{shopPurchaseShopInfoDto.address}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="预计送达日期：">{{shopPurchaseShopInfoDto.serviceDate}}</el-form-item>
          </el-col>
          <el-col :xs="8" :md="8">
            <el-form-item label="备注：">{{shopPurchaseShopInfoDto.remarks}}</el-form-item>
          </el-col>
        </el-row>
        <h3>采购商品明细</h3>
        <buyingIfor ref="buyingIfor" style="margin:10px 0px 10px 10px" />
      </el-card>
      <el-card
        class="box-card"
        shadow="never"
        style="margin-bottom: 20px;"
       
      >
        <div slot="header" class="clearfix">
          <h3>关联单据</h3>
        </div>
        <el-card
          v-if="platformOutStockDto"
          class="box-card"
          style="margin-bottom: 20px;"
          shadow="never"
        >
          <div slot="header" class="clearfix">
            <div class="title">
              <div>
                <h3>
                  采购出库单
                  <el-button size="mini" round type="primary">{{platformOutStockDto.status | outStockStatus}}</el-button>
                </h3>
              </div>
              <div>总仓出库：{{platformOutStockDto.outStockId}}</div>
            </div>
          </div>
          <el-row :gutter="10">
            <el-col :xs="8" :md="8">
              <el-form-item label="联系人：">{{platformOutStockDto.contacts}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系电话：">{{platformOutStockDto.contactsNum}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="出库时间：">{{platformOutStockDto.outStockTime}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="地址：">{{platformOutStockDto.companyAdress}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="备注：">{{platformOutStockDto.remarks}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="出库凭证：">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item"
                  :preview-src-list="platformOutStockDto.outStockCert"
                  v-for="(item,index) in platformOutStockDto.outStockCert"
                  :key="index"
                ></el-image>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card v-if="shopInStockDto" class="box-card" style="margin-bottom: 20px;" shadow="never">
          <div slot="header" class="clearfix">
            <div class="title">
              <div>
                <h3>
                  门店入库单
                  <el-button size="mini" round type="primary">{{shopInStockDto.status|inStockStatus}}</el-button>
                </h3>
              </div>
              <div>门店入库单：{{shopInStockDto.inStockId}}</div>
            </div>
          </div>
          <el-row :gutter="10">
            <el-col :xs="8" :md="8">
              <el-form-item label="联系人：">{{shopInStockDto.contacts}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系电话：">{{shopInStockDto.contactsNum}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="入库时间：">{{shopInStockDto.outStockTime}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="地址：">{{shopInStockDto.companyAdress}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="备注：">{{shopInStockDto.remarks}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="入库凭证：">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item"
                  :preview-src-list="shopInStockDto.outStockCert"
                  v-for="(item,index) in shopInStockDto.outStockCert"
                  :key="index"
                ></el-image>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card
          v-if="platformReturnInStockDto"
          class="box-card"
          style="margin-bottom: 20px;"
          shadow="never"
        >
          <div slot="header" class="clearfix">
            <div class="title">
              <div>
                <h3>
                  退货入库单
                  <el-button size="mini" round type="primary">{{platformReturnInStockDto.status|inStockStatus}}</el-button>
                </h3>
              </div>
              <div>退货入库单：{{platformReturnInStockDto.inStockId}}</div>
            </div>
          </div>
          <el-row :gutter="10">
            <el-col :xs="8" :md="8">
              <el-form-item label="联系人：">{{platformReturnInStockDto.contacts}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系电话：">{{platformReturnInStockDto.contactsNum}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="入库时间：">{{platformReturnInStockDto.outStockTime}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="地址：">{{platformReturnInStockDto.companyAdress}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="备注：">{{platformReturnInStockDto.remarks}}</el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="入库凭证：">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item"
                  :preview-src-list="platformReturnInStockDto.outStockCert"
                  v-for="(item,index) in platformReturnInStockDto.outStockCert"
                  :key="index"
                ></el-image>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-card>
      <div class="content">
        <!-- <el-button @click="save('ruleForm')" type="primary">保存</el-button> -->
        <el-button @click="quxiao('ruleForm')">返 回</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.storeOrderDetails {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
  .mdweizhi {
    display: flex;
    .jwd {
      span {
        padding-right: 10px;
      }
      .el-form-item__label {
        text-align: right;
        width: 50px !important;
      }
      .el-form-item__content {
        margin-left: 0px !important;
        margin-right: 20px;
      }
    }
  }
  .box-card {
    .header_title {
      background: rgba(102, 204, 102, 1);
      display: inline-block;
      padding: 5px 10px;
      color: #fff;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    h3 {
      margin: 0;
    }
  }
}
</style>
